<script setup>
import { ref } from 'vue'
// 原数组
const data = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202405071649_02120cc434ac8a8ce8802b8a0a83b52a.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202302241018_811ae593ad1aeb56f96048b55cb77e51.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202402291951_a51413c89dd1192de0b856f9ec812af6.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3edbb646a3296374f5fb6e68e0352bfe.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const List = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207211454_7f7f5c35f38bb7fa52f1089fce037631.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202302241033_c60cf51538aa172fd59f62b85cfda65d.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205091848_078ef4f782ef2c81098fe5a898c3d780.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202305051744_5aa9fc57f355d850c5418dd64eddae22.png?thumb=1&w=100&h=100&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
// 第二个按钮的数据
const OneData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202403221728_bb09314672ebb191d2a6eee63dcb09b1.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311251129_94eabb38d397de731c90cd014b104afd.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202304201532_de6f38151ff0489f2017296a66710d5a.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202404221604_0dd9a284c241ef9ac5f87a1ad842774d.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const OneDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202307260056_e9953630b3f39fa0825313bfd5bef057.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209201505_51fd440d528e6a509d1fc2d3be2b8492.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202307211847_1c77463c39e656ec5478b8af16fdac5d.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202308221138_8be174f9f068341d55b43aea9372a2db.png?thumb=1&w=100&h=100&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
// 第三个按钮的数据
const TowData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209221524_5e4867fe23e374a7a92842614578681a.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202403251650_b8232ba4d92cf2448bcf6b833789a8f4.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202304101504_22b0ebf11c5a60a76ba6de0a1c7fd2d5.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d9e887830eee09bd341b9ed130db2d9c.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const TowDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5f2d5c086ec68c203d22b09af10233cf.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208231100_293a400896600f574f787f78bec7d038.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202307311510_3013fc0d91cbbbdda2167d46e3384297.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202405211005_e0e76f0b11cf69052b3b74ea7393ea5e.png?thumb=1&w=100&h=100&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
// 第四个按钮的数据
const forData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202405161450_80a6da4faf22104ca9ba7f47ff1b43e4.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202403291113_d944f7fc0589038389838a7516849655.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310161117_0343c25251e7a2468e734dce07b9e736.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202405141416_139d3c6b4923cc79e41a4c53361d4ef0.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const forDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209281724_6ba505dea770a32533f9f08639ba8d56.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202405071211_3a24ac824582475643bbdc019774310d.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202403151420_1cbd44314bb5be98602cd544a3464483.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1648469058.76097010.jpg',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
// 恢复的原来的数据
const serrData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202405071649_02120cc434ac8a8ce8802b8a0a83b52a.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202302241018_811ae593ad1aeb56f96048b55cb77e51.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202402291951_a51413c89dd1192de0b856f9ec812af6.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3edbb646a3296374f5fb6e68e0352bfe.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const serrDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207211454_7f7f5c35f38bb7fa52f1089fce037631.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202302241033_c60cf51538aa172fd59f62b85cfda65d.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205091848_078ef4f782ef2c81098fe5a898c3d780.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202305051744_5aa9fc57f355d850c5418dd64eddae22.png?thumb=1&w=100&h=100&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const addTv = () => {
  data.value = OneData.value
  List.value = OneDatas.value
}
const addKt = () => {
  data.value = TowData.value
  List.value = TowDatas.value
}
const addnice = () => {
  data.value = forData.value
  List.value = forDatas.value
}
const addHot = () => {
  data.value = serrData.value
  List.value = serrDatas.value
}
</script>
<template>
  <div style="margin-top: 80px">
    <div class="common-layout">
      <el-container>
        <el-header>
          <h1>生活电器</h1>
          <h1 style="text-align: center" class="more">
            <span class="One" @click="addHot">风扇&nbsp;&nbsp;&nbsp;</span>
            <span class="Two" @click="addTv">扫地机&nbsp;&nbsp;&nbsp;</span>
            <span class="seer" @click="addKt">空净&nbsp;&nbsp;&nbsp;</span>
            <span class="seer" @click="addnice">清洁</span>
          </h1>
        </el-header>
        <el-container>
          <el-aside class="leftimg" width="234px">
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/644966333bed3ed0323ae3f7086baa72.jpg?thumb=1&w=234&h=300&f=webp&q=90"
            />
          </el-aside>
          <el-main>
            <div class="container">
              <div
                class="item"
                v-for="item in data"
                :key="item.id"
                style="width: 234px"
              >
                <img :src="item.src" class="image" style="width: 250px" />
                <div class="text">
                  <p class="one">{{ item.oname }}</p>
                  <p class="tow">{{ item.tname }}</p>
                  <p class="seer">
                    {{ item.sname }}&nbsp;
                    <del style="color: #b0b0b0">{{ item.delname }}</del>
                  </p>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
      <el-container>
        <el-header> </el-header>
        <el-container>
          <el-aside class="leftimg" width="234px">
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23ea3bb9378ff3a7fc65b57731730576.jpg?thumb=1&w=234&h=300&f=webp&q=90"
            />
          </el-aside>
          <el-main>
            <div class="container">
              <div
                class="item"
                v-for="item in List"
                :key="item.id"
                style="width: 234px"
              >
                <img :src="item.src" class="image" style="width: 250px" />
                <div class="text">
                  <p class="one">{{ item.oname }}</p>
                  <p class="tow">{{ item.tname }}</p>
                  <p class="seer">
                    {{ item.sname }}&nbsp;
                    <del style="color: #b0b0b0">{{ item.delname }}</del>
                  </p>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<style scoped lang="scss">
.common-layout {
  overflow: hidden;
  width: 1500px;
  height: 750px;
  margin: 1px auto;
  .leftimg {
    transition: all 0.5s;
    img {
      width: 243px;
      height: 300px;
    }
    &:hover {
      cursor: pointer;
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    .more {
      display: flex;
      align-items: center;
      .One {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .Two {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .seer {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
    }
  }
  .el-main {
    padding: 0;
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        text-align: center;
        flex-basis: 25%;
        transition: all 0.5s;
        &:hover {
          cursor: pointer;
          transform: translate3d(0, -3px, 0);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        .text {
          .one {
            font-size: 12px;
          }
          .tow {
            color: #b0b0b0;
          }
          .seer {
            color: #e26237;
          }
        }
      }
    }
  }
}
.common {
  overflow: hidden;
  width: 1500px;
  height: 800px;
  margin: 50px auto;
  .leftimg {
    transition: all 0.5s;
    img {
      width: 243px;
      height: 300px;
    }
    &:hover {
      cursor: pointer;
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    .more {
      display: flex;
      align-items: center;
      .One {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .Two {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .seer {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
    }
  }
  .el-main {
    padding: 0;
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        text-align: center;
        flex-basis: 25%;
        transition: all 0.5s;
        &:hover {
          cursor: pointer;
          transform: translate3d(0, -3px, 0);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        .text {
          .one {
            font-size: 12px;
          }
          .tow {
            color: #b0b0b0;
          }
          .seer {
            color: #e26237;
          }
        }
      }
    }
  }
}
</style>
